<template>


    <el-affix :offset="0" style="width: 100%">
        <div>
            <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    :ellipsis="false"
                    @select="handleSelect"
                    style="width: 100%"
            >
                <el-menu-item index="1" @click="getHomeUrl">线上图库 pixiv</el-menu-item>
                <el-menu-item index="2" @click="getTagImgUrl">
                    图片库
                </el-menu-item>
                <el-menu-item index="3" @click="getAddImgUrl">
                    添加图片
                </el-menu-item>
                <el-menu-item index="4" @click="getAddTagUrl">
                    添加标签
                </el-menu-item>
                <el-menu-item index="5" @click="getSetTagUrl">
                    设置标签
                </el-menu-item>
                <el-menu-item index="6" @click="gotoXXGL">
                    权限管理
                </el-menu-item>

                <div class="flex-grow" />
                <el-sub-menu index="2">
                    <template #title>
                        <span v-if="isLogin">
                          {{this.roleName}}：{{this.userName}} &nbsp;&nbsp;&nbsp;&nbsp;
                        </span>
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                    </template>
                    <el-menu-item index="SelfInfo" v-if="isLogin" @click="getSelfInfoUrl">
                        个人信息
                    </el-menu-item>
                    <el-menu-item index="2-2" v-if="isLogin" @click="zhuxiao()">
                        注销
                    </el-menu-item>
                    <el-menu-item index="Login" v-if="!isLogin" @click="goLogin()">
                        登录
                    </el-menu-item>
                </el-sub-menu>

            </el-menu>
        </div>
    </el-affix>



<!--<el-row class="headerbox">-->
<!--  <el-col :span="6">-->
<!--    <img style="width: 120px" src=../assets/logo.png>-->
<!--  </el-col>-->
<!--  <el-col :span="18">-->

<!--    <el-row class="menu-bom">-->
<!--      <el-col :span="4">-->
<!--        <a :href=getTagImgUrl()> <el-text class="mx-1" size="large">图片库</el-text></a>-->
<!--      </el-col>-->
<!--      <el-col :span="4">-->
<!--        <a :href=getAddImgUrl()><el-text class="mx-1" size="large">添加图片</el-text> </a>-->
<!--      </el-col>-->
<!--      <el-col :span="4">-->
<!--        <a :href=getAddTagUrl()> <el-text class="mx-1" size="large">添加标签</el-text></a>-->
<!--      </el-col>-->
<!--      <el-col :span="4">-->
<!--        <a :href=getSetTagUrl()> <el-text class="mx-1" size="large">设置标签</el-text></a>-->
<!--      </el-col>-->
<!--      <el-col v-if="!this.isLogin" :span="8">-->
<!--        <a :href=goLogin()> <el-button><span> 登录 </span></el-button> </a>-->
<!--      </el-col>-->

<!--      <el-col v-if="this.isLogin" :span="6">-->
<!--          <el-row>-->
<!--              <el-avatar shape="square" :size="30" src="../assets/tx.jpg" />-->
<!--              <span style="font-size: 15px; color: deeppink;">&nbsp; &nbsp; &nbsp;{{this.roleName}}：{{this.userName}} </span>-->
<!--          </el-row>-->
<!--      </el-col>-->
<!--      <el-col v-if="this.isLogin" :span="2">-->
<!--        <el-button size="small" @click="zhuxiao()"><span> 注销 </span></el-button>-->
<!--      </el-col>-->

<!--    </el-row>-->
<!--  </el-col>-->
<!--</el-row>-->



</template>

<script>
import {inject} from 'vue'
import $cookies from "vue-cookie";
import axios from 'axios'
export default {
  name: "MyHeader",
  data(){
    return{
      myVueURL: inject('$vueURL'),
      myBaseURL: inject('$baseURL'),
      isLogin : false,
      userName : "",
      roleName : "",
      activeIndex: ""
    }
  },
  methods:{
    getHomeUrl:function (){
        this.$router.push({path: '/'} )
    },
    getTagImgUrl:function (){
        this.$router.push({path: '/TagImgs'} )
    },
    getSetTagUrl:function (){
        this.$router.push({path: '/SetTag'} )
    },
    gotoXXGL: function () {
        this.$router.push({path: '/RoleAuth'} )
    },
    getAddImgUrl:function (){
        this.$router.push({path: '/AddImg'} )
    },
    getAddTagUrl:function (){
        this.$router.push({path: '/AddTag'} )
    },
    goLogin: function (){
        this.$router.push({path: '/Login'} )
    },
    zhuxiao: function (){
      this.isLogin = false
      // 删除cookie
      $cookies.delete("token")
    },
      handleSelect:function () {
          console.log("")
      },
      getSelfInfoUrl: function () {
          this.$router.push({path: '/UserInfo'} )
      }
  },
  mounted() {
    // 获取登录状态
    const token = $cookies.get("token")
    //console.log("token:" + token)
    if(token !== null && token !== "")
    {
      //console.log("token:" + token)
      this.isLogin = true
      $cookies.set("isLogin", true);
      // 获得用户信息
      axios({
        method:'post',
        url:'/user/getSelfInfo',
        baseURL:this.myBaseURL,
        params:{
          "token": token
        }
      }).then(response => {
        const user = response.data
        if(user != null)
        {
          this.userName = user.name
          const roleId = user.roleId
          // 获取角色 name
          axios({
            method:'post',
            url:'/role/getInfo',
            baseURL:this.myBaseURL,
            params:{
              "id": roleId
            }
          }).then(res=>{
            console.log("getRoleInfo res:" + res.data.roleName)
            this.roleName = res.data.roleName
          })
        }
      }).catch(err =>{
        // 获取个人信息失败！
        // 登录状态置零
        console.log(err)
        $cookies.set("isLogin", false)
        $cookies.set("token", "")
        this.isLogin = false
        // 删除这条无效cookie
    })
    }

  }
}
</script>

<style scoped>
.flex-grow {
    flex-grow: 1;
}

.menu-bom{
  position: center;
}
a:link,a:visited{
    text-decoration:none;  /*超链接无下划线*/
    color: black;
}
.mx-1:hover {
    background: #42b983;
}
.mx-1{
    font-size: 18px;
}
.headerbox{
    //padding-top: 50px;
    //width: 100%;
    //height: 300px;
    //background-image: url(../assets/background.jpg);
    //background-repeat: space;
}
</style>
